<template>
  <v-chart :autoresize="true" :manual-update="true" class="chart" theme="shine"
           ref="chart"/>
</template>

<script lang="ts">
import {defineComponent, reactive, ref} from 'vue';
import {monetaryTrend} from '@/api/dataScreen';
import dayjs from "dayjs";

export default defineComponent({
  props: {
    type: Number
  },
  setup(props, context) {
    const state = reactive(new class {
      list = [] as any;
      xData = [] as any;
      seriesData = [] as any;
    });

    const chart = ref();


    const initOptions = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        },
        formatter(params) {
          let str = "";
          for (let x in params) {
            str += params[x].seriesName + ":" + params[x].value + '万元/';
          }
          return str.slice(0, str.length - 1);
        }
      },
      legend: {
        data: ['去年', '今年'],
        x: 'left',
        top: '5%',
        left: '10%',
        itemWidth: 10,//图例的宽度
        itemHeight: 10,//图例的高度
        textStyle: {//图例文字的样式
          color: '#fff',
          fontSize: '0.65rem'
        }
      },
      grid: {
        // left: '3%',
        // right: '4%',
        bottom: '30%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        splitLine: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(211 ,211 ,211,0.5)'
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: '0.65rem'
          },
          // rotate: 20,
        },
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: '0.65rem',
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(211 ,211 ,211,0.0)'
          }
        }
      },
      series: [
        {
          name: '去年',
          type: 'line',
          smooth: true,
          // stack: '总量',
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                colorStops: [
                  // !! 在此添加想要的渐变过程色 !!
                  {offset: 0, color: '#7bbfea'},
                  {offset: 0.5, color: '#33a3dc'},
                  {offset: 1, color: '#228fbd'}
                ]
              },
            }
          },
        },
        {
          name: '今年',
          type: 'line',
          smooth: true,
          // stack: '总量',
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                colorStops: [
                  // !! 在此添加想要的渐变过程色 !!
                  {offset: 0, color: '#c76968'},
                  {offset: 0.5, color: '#b3424a'},
                  {offset: 1, color: '#d93a49'}
                ]
              },
            }
          },
        }
      ]
    }

    async function getData(stationCode: number, type: number) {
      state.list = await monetaryTrend(stationCode || -1, type);
      if (state.list && state.list[0]) {
        dealChartData();
      }
    }

    function dealChartData() {
      state.xData = [];
      state.seriesData[0] = [];
      state.seriesData[1] = [];
      for (let item of state.list) {
        item.日期1 = dayjs(new Date(item.日期1)).format('M/DD');
        state.xData.push(item.日期1);
        for (let key in item) {
          if (key === '油机金额1') {
            state.seriesData[0].push(item.油机金额2);
          } else if (key === '油机金额2') {
            state.seriesData[1].push(item.油机金额1);
          }
        }
      }
      initOptions.xAxis['data'] = state.xData;
      initOptions.series[0]['data'] = state.seriesData[0];
      initOptions.series[1]['data'] = state.seriesData[1];
      chart.value.setOption(initOptions);
    }


    // watch(() => props.type, () => {
    //   getData();
    // })

    return {
      getData,
      chart
    }
  }
});
</script>

<style scoped>

</style>
